<template>
  <div id="detail">
    <detail-nav-bar class="nav-bar" @titleClick="titleClick" ref="nav"/>
    <scroll class="content" ref="scroll" :probe-type="3" @scroll="contentScroll">
      <detail-swiper :topImages="topImages"/>
      <detail-base-info :goods="goods"/>
      <detail-shop-info :shop="shop"/>
      <detail-goods-info :detail-info="detailInfo" @imgLoad="imgLoad"/>
      <detail-params-info :params-info="paramsInfo" ref="params"/>
      <detail-comment-info :comment-info="commentInfo" ref="comment"/>
      <goods-list :goods="recommends" ref="recommend"/>
    </scroll>
    <detail-bottom-bar @addCart="addCart"/>
    <back-top @click="backTop" v-show="isShowBackTop"/>
    <toast ref="toast"/>
  </div>
</template>

<script>
  import Scroll from "@/components/common/scroll/Scroll";
  // import BackTop from "@/components/common/backTop/BackTop";
  import GoodsList from "@/components/content/goods/GoodsList";
  import DetailNavBar from "@/views/detail/childcomps/DetailNavBar";
  import DetailSwiper from "@/views/detail/childcomps/DetailSwiper";
  import Toast from "@/components/common/toast/Toast";


  import DetailBaseInfo from "@/views/detail/childcomps/DetailBaseInfo";
  import DetailShopInfo from "@/views/detail/childcomps/DetailShopInfo";
  import DetailGoodsInfo from "@/views/detail/childcomps/DetailGoodsInfo";
  import DetailParamsInfo from "@/views/detail/childcomps/DetailParamsInfo";
  import DetailCommentInfo from "@/views/detail/childcomps/DetailCommentInfo";
  import DetailBottomBar from "@/views/detail/childcomps/DetailBottomBar";

  import {Goods,Shop,Params} from "@/network/detail";
  import {getDetail,getRecommend} from "@/network/detail";
  import {backTopMixin} from "@/components/common/mixin";
  import {debounce} from "@/components/common/utilis";
  import {mapActions} from 'vuex'

  export default {
    name: "Detail",
    components:{
      Scroll,
      // BackTop,
      GoodsList,
      DetailNavBar,
      DetailSwiper,
      Toast,
      DetailBaseInfo,
      DetailShopInfo,
      DetailGoodsInfo,
      DetailParamsInfo,
      DetailCommentInfo,
      DetailBottomBar,
    },
    mixins:[backTopMixin],
    data(){
      return {
        // isShowBackTop:false,   抽到mixin里
        iid:null,        //iid
        topImages:[],    //轮播图数据
        goods:{},        //商品基本信息（价格，标题等）
        shop:{},         //商店信息
        detailInfo:{},   //商品信息（主要为图片）
        paramsInfo:{},     //商品参数
        commentInfo:[],     //评论信息
        recommends:[],       //推荐信息
        themeTopY:[],
        getThemeTopY:null,

      }
    },
    created() {
      // 1.保存路由跳转传过来的iid
      this.iid = this.$route.params.iid

      // 2.将保存的iid传给服务器
      getDetail(this.iid).then( res => {
        const data = res.data.result
        // console.log(res);
        // 1.获取轮播图数据
        this.topImages = data.itemInfo.topImages
        // 2.获取商品文字信息
        this.goods = new Goods(data.columns, data.shopInfo.services, data.itemInfo)
        // console.log(this.goods);
        // 3.获取商店信息
        this.shop = new Shop(data.shopInfo)
        // console.log(this.shop);
        // 4.获取商品的详情信息
        this.detailInfo = data.detailInfo
        // console.log(data.detailInfo);
        // 5.获取参数信息
        this.paramsInfo = new Params(data.itemParams)
        // console.log(this.paramsInfo);
        // 6.获取评论信息(有的商品没评论，做一下判断)
        if(data.rate.cRate !== 0){
          this.commentInfo = data.rate.list[0]
          // console.log(this.commentInfo);
        }
      })

      // 3.请求推荐数据
      getRecommend().then(res => {
        // console.log(res);
        this.recommends = res.data.data.list
      })

      //先定义好一个进行了防抖处理的函数，在每次图片加载完时调用
      //将 参数 评论 推荐 组件到顶部的距离保存进一个数组里
      this.getThemeTopY = debounce(() => {
        this.themeTopY.push(0)
        this.themeTopY.push(this.$refs.params.$el.offsetTop)
        this.themeTopY.push(this.$refs.comment.$el.offsetTop)
        this.themeTopY.push(this.$refs.recommend.$el.offsetTop)
        //此行代码是辅助判断而已，跟上面关系不是太大
        this.themeTopY.push(Number.MAX_VALUE)

      })
    },
    methods:{
      ...mapActions(['addToCart']),

      // 下面两个方法已抽到mixin里
      // backTopClick回到顶部
      // contentScroll(position) 根据滑动判断是否隐藏按钮

      contentScroll(position) {
        //是否显示返回顶部按钮
        this.isShow(position)
        //根据滚动距离让顶部导航变颜色
        const Y = -position.y
        for(let i = 0; i < this.themeTopY.length - 1; i++){
          if((this.themeTopY[i] <= Y && this.themeTopY[i+1] > Y)){
            this.$refs.nav.currentIndex = i
          }
        }

      },
      //监测图片加载是否完成
      imgLoad(){
        this.getThemeTopY()
      },
      // 点击顶部导航跳到相应组件处
      titleClick(index) {
        this.$refs.scroll.scrollTo(0, -this.themeTopY[index])
      },

      //加入购物车
      addCart(){
        //创建一个对象保存商品信息以便于发给vuex管理
        const product = {}
        product.iid = this.iid
        product.img = this.topImages[0]
        product.title = this.goods.title
        product.desc = this.goods.desc
        product.price = this.goods.realPrice

        // 映射版
        //注意区分addCart与addToCart,addToCart与vuex相关，映射的名字,addCart是子组件发出来的
        this.addToCart(product).then(res => {
          this.$refs.toast.show(res, 2000)
        })
        // this.$store.dispatch('addCart',product)   原版（没用映射）
      }
    },
  }
</script>

<style scoped>
  #detail{
    position: relative;
    height: 100vh;
  }
  .nav-bar{
    /*滑动区域定位往上滚会覆盖掉导航栏，定位是为了可以使用z-index*/
    position: relative;
    z-index: 11;
    background-color: #fff;
  }
  .content{
    position: absolute;
    left: 0;
    right: 0;
    top: 44px;
    bottom: 49px;
  }
</style>